<template>
  <div ref="container" class="container">
    <div class="file-box">
      <div class="file-tree">
        <div ref="dropdown" class="dropdown"></div>
        <file-tree :dropdown="dropdown"></file-tree>
      </div>
      <cut-off-rule
        v-model="fileTreeWidth"
        :min="200"
        :max="800"
        style="margin-left: -5px"
      ></cut-off-rule>
      <div class="file-list">
        <div class="table-filter">
          <file-filter></file-filter>
        </div>
        <div class="header-buttons">
          <div class="header-title">
            <img
              style="width: 20px"
              src="@/assets/images/dashboard/dec@2x.png"
            />
            <div class="text">
              {{ currentFolder?.name }}
            </div>
          </div>
          <header-buttons></header-buttons>
        </div>
        <div class="file-table">
          <file-table></file-table>
        </div>
      </div>
    </div>
    <upload-modal></upload-modal>
    <share-modal></share-modal>
    <createEnclosure openType="file"></createEnclosure>
    <move-dialog
      v-model:visible="moveModal"
      :ok-function="sendMove"
      :config="{ type: 0 }"
    ></move-dialog>
    <version-drawer :popup-container="container" width="320px"></version-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed, provide } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useRoute } from 'vue-router';
  import MoveDialog from '@/components/tree-folder/index.vue';
  import useFileManageStore from '@/store/modules/file-manage/index';
  import FileTable from './components/table-file.vue';
  import FileTree from './components/tree-file.vue';
  import CutOffRule from './components/cut-off-rule.vue';
  import HeaderButtons from './components/buttons-header.vue';
  import UploadModal from './components/modal-upload.vue';
  import ShareModal from './components/modal-share.vue';
  import VersionDrawer from './components/drawer-version.vue';
  import FileFilter from './components/filter-file.vue';
  import createEnclosure from '../enclosure/components/create-enclosure.vue';

  const store = useFileManageStore();
  const { currentFolder, moveModal, sendMove } = storeToRefs(store);

  const dropdown = ref();
  const fileTreeWidth = ref(300);
  const container = ref();
  const route = useRoute();
  const projectId = computed(() => {
    return route?.params.projectId || '';
  });

  const fileTreeWidthStr = computed(() => {
    return `${fileTreeWidth.value}px`;
  });

  provide('projectId', projectId);
</script>

<style lang="less" scoped>
  ::-webkit-scrollbar {
    width: 1px;
  }
  .container {
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-1);
    overflow: hidden;
    position: relative;
  }
  .dropdown {
    position: absolute;
    :deep(.arco-dropdown-list-wrapper) {
      max-height: none;
    }
  }
  .file-box {
    display: flex;
    height: 100%;
    position: relative;
    .file-tree {
      padding: 24px 0;
      width: v-bind(fileTreeWidthStr);
      overflow-y: scroll;
      margin-right: -1px;
    }
    .file-list {
      width: calc(100% - v-bind(fileTreeWidthStr));
      position: relative;
      padding: 0 44px 24px 44px;
      .table-filter {
        height: 88px;
        width: 100%;
        border-bottom: 1px solid var(--color-border);
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .header-buttons {
        height: 84px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        .header-title {
          width: 100%;
          flex: 1;
          display: flex;
          overflow: hidden;
          img {
            margin-right: 8px;
          }
          .text {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 18px;
          }
        }
      }
      .file-table {
        height: calc(100% - 172px);
        overflow: hidden;
      }
    }
  }
</style>
